<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>炫酷带方向感应的鼠标滑过图片3D动画特效</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<header class="htmleaf-header">
		<h1>炫酷带方向感应的鼠标滑过图片3D动画特效 <span>A Direction-aware 3D hover effect</span></h1>
	</header>
	<section class="htmleaf-container">
		<div class='container'>
		  <ul>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		       
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		       
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		    <li>
		      <a class='normal' href='#'>
		        
		      </a>
		      <div class='info'>
		        <h3>Single-origin coffee whatever</h3>
		        <p>Williamsburg tofu polaroid, 90's Bushwick irony locavore ethnic meh messenger bag Truffaut jean shorts.</p>
		      </div>
		    </li>
		  </ul>
		</div>
	</section>
	
	<script>
	var nodes = document.querySelectorAll('li'), _nodes = [].slice.call(nodes, 0);
	var getDirection = function (ev, obj) {
	    var w = obj.offsetWidth, h = obj.offsetHeight, x = ev.pageX - obj.offsetLeft - w / 2 * (w > h ? h / w : 1), y = ev.pageY - obj.offsetTop - h / 2 * (h > w ? w / h : 1), d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
	    return d;
	};
	var addClass = function (ev, obj, state) {
	    var direction = getDirection(ev, obj), class_suffix = '';
	    obj.className = '';
	    switch (direction) {
	    case 0:
	        class_suffix = '-top';
	        break;
	    case 1:
	        class_suffix = '-right';
	        break;
	    case 2:
	        class_suffix = '-bottom';
	        break;
	    case 3:
	        class_suffix = '-left';
	        break;
	    }
	    obj.classList.add(state + class_suffix);
	};
	_nodes.forEach(function (el) {
	    el.addEventListener('mouseover', function (ev) {
	        addClass(ev, this, 'in');
	    }, false);
	    el.addEventListener('mouseout', function (ev) {
	        addClass(ev, this, 'out');
	    }, false);
	});
	</script>
</body>
</html>